<style lang="scss">
$border-color: #e3e3e3;
$border-width: 1px;

@mixin grid-column-style() {
  grid-template-columns: var(--z-grid-template-columns);
  grid-column-gap: var(--z-grid-column-gap, 0);
}

@mixin grid-row-style() {
  grid-template-rows: var(--z-grid-template-rows);
  grid-row-gap: var(--z-grid-row-gap, 0);
}

@mixin grid-default-style() {
  display: grid;
  @include grid-column-style();
  @include grid-row-style();
  grid-auto-flow: row;
}



.z-table-grid--render {
  --z-table-grid-row-indicator: 0;

  .z-table-grid-editor {
    --z-table-grid-column-indicator-height: 30px;
    --z-table-grid-row-indicator-width: 30px;
  }

  .z-data-grid__style-def, .z-data-grid__item-def {
    display: flex;
    align-items: center;
    //justify-content: center;
  }
  .z-data-grid__item-def {
    .cm-field {
      > .el-form-item {
        margin-bottom: 0;
      }
    }
  }


  .z-table-grid-column-indicator, .z-table-grid-plc {
    height: var(--z-table-grid-column-indicator-height);
  }

  .z-table-grid-editor-wrap {
    font-size: 14px;
    //display: flex; flex-direction: row; align-items: flex-start;
    //overflow-x: auto;
    .z-table-grid-editor-c {
      overflow-x: auto;
    }
  }

  .z-table-grid-row-indicator {
    width: var(--z-table-grid-row-indicator-width);
  }

  .z-table-grid {
    position: relative;
    border: var(--z-data-grid-bw, $border-width) solid var(--z-data-grid-bc, $border-color);
  }


  .z-table-grid-column-indicator {
    display: grid;
    @include grid-column-style();
    > * {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .z-table-grid-row-indicator {
    display: grid;
    grid-template-columns:1fr;
    @include grid-row-style();
    > * {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .z-table-grid-def {
    @include grid-default-style();
  }

  .z-table-grid-con, .z-table-grid-style {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .z-table-grid-con {
    grid-template-areas: var(--z-grid-template-areas);
    z-index: 2;
  }

  .z-table-grid-style {
    grid-template-areas: var(--z-grid-template-style-areas);
  }

  .z-table-grid-bg, .z-table-grid-con, .z-table-grid-style {
    > * {
      user-select: none;
      border-right: var(--z-data-grid-bw, $border-width) solid var(--z-data-grid-bc, $border-color);
      border-bottom:var(--z-data-grid-bw, $border-width) solid var(--z-data-grid-bc, $border-color);
      &[islastrow] {
        border-bottom: none;
      }
      &[islastcolumn] {
        border-right: none;
      }
      &.has-style {
        border-bottom: none;
        border-right: none;
      }
    }
  }


  .z-table-grid--edit {
    .z-table-grid-con {
      pointer-events: none;
      > * {
        pointer-events: auto;
      }
    }
  }

  .z-table-grid__select-area {
    position: absolute;
    z-index: 111;
    background: rgb(1 136 251 / 35%);
    pointer-events: none;
  }
  [cell-title] {
    font-size: 12px;
    color: #999;
  }

  .v-contextmenu {
    display: none;
  }

  .select-right {
    &.v-contextmenu  {
      display: block;
    }
  }

  .z-table-grid-column {
    position: relative;
    [column-resize-trigger] {
      --column-resize-trigger-bg: transparent;
      &[moving] {
        --column-resize-trigger-bg: #3ba2f4
      }
      height: 100%;
      position: absolute;
      right: 0;
      top: 0;
      //transform: translateX(50%);
      cursor: e-resize;
      width: 6px;
      user-select: none;
      &::before {
        content: '';
        background: var(--column-resize-trigger-bg);
        width: 100%;
        height: var(--z-table-grid-column-indicator-height);
        position: absolute;
        left: 0;
        top: 0;
      }
      &::after {
        content: '';
        background: var(--column-resize-trigger-bg);
        width: 1px;
        height: 100%;
        position: absolute;
        left: 100%;
        top: 0;
      }
    }
  }

  .z-table-grid-row {
    position: relative;
    [row-resize-trigger] {
      --column-resize-trigger-bg: transparent;

      &[moving] {
        --column-resize-trigger-bg: #3ba2f4
      }

      width: 100%;
      height: 4px;
      position: absolute;
      left: 0;
      bottom: 0;
      cursor: n-resize;
      user-select: none;
      &::before {
        content: '';
        background: var(--column-resize-trigger-bg);
        height: 100%;
        width: var(--z-table-grid-row-indicator-width);
        position: absolute;
        left: 0;
        top: 0;
      }
      &::after {
        content: '';
        background: var(--column-resize-trigger-bg);
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0;
        top: 100%;
      }
    }
  }

  .z-table-grid {
    width: max-content;
  }
  .z-table-grid-editor-c {
    width: 100%;
  }

  .z-table-grid-row-indicator {
    padding-bottom: var(--z-table-grid-row-indicator, 150px);
  }

  .z-table-grid-column-indicator {
    height: 0;
    opacity: 0;
  }
  .z-table-grid-editor-l {
    width: 0;
    height: 0;
    opacity: 0;
  }
  .z-table-grid__action {
    display: none;
  }
  [cell-title] {
    display: none;
  }
}

</style>


<script>
// import Vue from 'vue/dist/vue.esm'
// import {SelectMixin} from "./select";
import {getFieldMixinDefMap} from "../../../zform/render";
import {
  toLetters,
  Arr,
  getCellInfo,
  getGridAreasStyle,
  getRangeArrAllKeys, convertLetterToNumber, getSimpleCell, parseKeyArr
} from "./utils";
// import contentmenu from 'v-contextmenu'
// import 'v-contextmenu/dist/index.css'
// Vue.use(contentmenu)
import ZDataForm from "./ZDataGridForm";

// console.log(Object.fromEntries(defMap.entries()))

function unit(v) {
  let ret = v
  if (typeof v === 'number') {
    ret = ret + 'px'
  }
  return ret
}

export default {
  name: 'ZDataGrid',
  mixins: [
    // SelectMixin()
  ],
  props: {
    def: {
      type: Object,
      default() {
        return {
        }
      }
    },
    minResizeNum: {
      type: Number,
      default: 20
    },
    defColumnSize: {
      type: String,
      default: '100px'
    },
    defRowSize: {
      type: String,
      default: '50px'
    }
  },
  components: {
    ZDataForm
  },
  data() {
    return {
      eventBus: ZY_EXT.mitt(),
      controlForm: {
        num: 1
      },
      id: ZY.rid(),
    }
  },
  inject: ['curFormCon'],
  mounted() {
    // console.log(this.def)
    this.curFormCon.importData(this.def.model)
  },
  setup(props) {
    const {provide, reactive, getCurrentInstance, watch, inject, toRaw} = globalThis.vueCompositionAPI
    let curFormCon = inject('curFormCon')
    // console.log(curFormCon)
    let version = ZY.rid()

    let lastRow = ZY.lodash.get(props.def, 'lastRow', 0)
    let lastColumn = ZY.lodash.get(props.def, 'lastColumn', 0)
    let defs = ZY.lodash.get(props.def, 'defs', [])
    let styleDefs = ZY.lodash.get(props.def, 'styleDefs', [])
    let rowSizeArr = ZY.lodash.get(props.def, 'size.row', [])
    let columnSizeArr = ZY.lodash.get(props.def, 'size.column', [])
    let origin_data = ZY.lodash.get(props.def, 'origin.data', [])
    let origin_columnlen = ZY.lodash.get(props.def, 'origin.config.columnlen', {})
    let origin_rowlen = ZY.lodash.get(props.def, 'origin.config.rowlen', {})

    let borderInfo = ZY.lodash.get(props.def, 'origin.config.borderInfo', [])
    borderInfo.forEach(info => {
      // console.log('borderInfo', info)
      info.range.forEach(rangeItem =>  {
        let styleDef = {
          id: ZY.rid(6)
        }
        let firstPos = toLetters( rangeItem.column[0]) + rangeItem.row[0]
        let lastPos = toLetters( rangeItem.column[1]) + rangeItem.row[1]
        styleDef.range = firstPos + ':' + lastPos
        styleDef.style = {
          border: `${info.style}px solid ${info.color}`,
        }
        styleDefs.push(styleDef)
        // console.log(firstPos, lastPos)
      })
    })

    function getSize(path, defVal) {
      let rowSize = ZY.lodash.get(props.def, path, defVal)
      if (typeof rowSize === 'number') {
        rowSize = rowSize + 'px'
      }
      return rowSize
    }

    let rowSize = getSize('origin.row',  props.defRowSize)
    let columnSize = getSize('origin.column',  props.defColumnSize)

    // origin_data.length
    for (let i = 0; i < lastRow + 1; i++) {
      let v = rowSize;
      if (origin_rowlen[i]) {
        v = unit(origin_rowlen[i])
      }
      rowSizeArr.push(v)
    }

    // origin_data[0].length
    for (let i = 0; i < lastColumn + 1; i++) {
      let v = columnSize;
      if (origin_columnlen[i]) {
        v = unit(origin_columnlen[i])
      }
      columnSizeArr.push(v)
    }

    console.log(lastColumn, rowSizeArr, columnSizeArr)

    let celldata = ZY.lodash.get(props.def, 'origin.celldata', [])

    let state = ZY.T.state({
      rowNum: rowSizeArr.length,
      columnNum: columnSizeArr.length,
      defs,
      styleDefs,
      celldata,
      origin:  ZY.lodash.get(props.def, 'origin', {}),
      rowSizeArr,
      columnSizeArr,
      objDefs: [],
      obj: {}
    })

    function resolveState() {
      state.objDefs = state.defs.map(def => {
        def.ext = {
          arr: def.range.split(':')
        }
        def.ext.allArr = getRangeArrAllKeys(def.ext.arr[0], def.ext.arr[1])
        return def
      })

      let obj = {}
      state.objDefs.forEach(def => {
        def.ext.allArr.forEach(item => {
          if (!obj[item]) {
            let [firstColumnIndex, firstRowIndex] = parseKeyArr(def.ext.arr[0])
            let [lastColumnIndex, lastRowIndex] = parseKeyArr(def.ext.arr[0])

            obj[item] = {
              id: def.id,
              def,
              firstColumnIndex,
              firstRowIndex,
              lastColumnIndex,
              lastRowIndex,
              allArr: def.ext.allArr
            }
          }
        })
        // console.log(def.ext.arr[1])
      })
      state.obj = obj
      // console.log(obj)
    }

    resolveState()

    let clsName = 'z-table-grid--' + ZY.rid(6)
    let sel = '.' + clsName

    let result
    updateStyle()


    function updateStyle() {
      if (result) {
        result.cssdom.parentNode.removeChild(result.cssdom)
        result = null
      }
      let areaStyle = getGridAreasStyle(state.defs, {
        rowNum: state.rowNum,
        columnNum: state.columnNum
      })
      let styleAreaStyle = getGridAreasStyle(state.styleDefs, {
        rowNum: state.rowNum,
        columnNum: state.columnNum
      })
      const obj = {
        [sel]: {
          ['--z-grid-template-areas']: areaStyle,
          ['--z-grid-template-style-areas']: styleAreaStyle,
        }
      }
      result = ZY_EXT.cssobj(obj)
    }

    // console.log(areasStyle)

    return {
      result,
      version,
      updateStyle,
      resolveState,
      clsName,
      state,
    }
  },
  methods: {
    $_defColumnSize() {
      let column = ZY.lodash.get(this.state.origin, 'column', -1)
      if (column > -1) {
        return column + 'px'
      }
      return this.defColumnSize
    },
    $_defRowSize() {
      let row = ZY.lodash.get(this.state.origin, 'row', -1)
      if (row > -1) {
        return row + 'px'
      }
      return this.defRowSize
    },
    appendColumn() {
      let newArr = Arr(this.controlForm.num).map(() => this.$_defColumnSize())
      this.state.columnSizeArr = this.state.columnSizeArr.concat(newArr)
      this.state.columnNum = this.state.columnSizeArr.length
    },
    appendRow() {
      // this.state.rowSizeArr.push(this.defRowSize)
      let newArr = Arr(this.controlForm.num).map(() => this.$_defRowSize())
      this.state.rowSizeArr = this.state.rowSizeArr.concat(newArr)
      this.state.rowNum = this.state.rowSizeArr.length
    },
    $_offset(containerSelector = '.z-table-grid-editor-content') {
      let container = this.getContainer()
      let containerRect = container.querySelector(containerSelector).getBoundingClientRect()
      return containerRect
    },
    $_GetPos(target, containerSelector = '.z-table-grid-editor-content') {
      let container = this.getContainer()
      let containerRect = container.querySelector(containerSelector).getBoundingClientRect()
      let cellStyle = this.getFirstCellStyle()
      let borderRight = parseFloat(cellStyle.borderRight);
      let borderBottom = parseFloat(cellStyle.borderBottom);

      let rect = target.getBoundingClientRect();
      let top = rect.top - containerRect.top - (borderBottom < 1 ? 1 : borderBottom);
      let left = rect.left - containerRect.left - (borderRight < 1 ? 1 : borderRight);
      let width = rect.width
      let height = rect.height
      let lastLeft = (left + width)
      let lastBottom = (top + height)
      return {
        left, top, width: rect.width, height: rect.height, lastLeft, lastBottom
      }
    },
    toLetters,
    getContainer() {
      return document.getElementById(this.id)
    },
    getFirstCellStyle() {
      let container = this.getContainer()
      // console.log(container.getBoundingClientRect())
      let cell = container.querySelector('.z-table-grid-editor__cell:first-child')
      return  window.getComputedStyle(cell);
    },
    renderRowIndicator() {
      let self = this
      let moving = false
      let cur = null

      function handleMouseMove(e) {
        if (moving) {
          // console.log(e)
          let newVal = (e.pageY -  cur.target.parentElement.getBoundingClientRect().top)
          if (newVal < self.minResizeNum) {
            newVal = self.minResizeNum
          }
          cur.target.style.top = newVal + 'px'
          cur.newVal = newVal
        }
      }

      function handleMouseUp(e) {
        if (moving) {
          moving = false
          cur.target.style.width = '100%'
          cur.target.style.zIndex = null
          let newVal = cur.target.style.top
          cur.target.style.top = null
          cur.target.removeAttribute('moving')
          cur.target.parentElement.style.userSelect = null
          // console.log(cur)
          self.state.rowSizeArr[cur.index] = newVal
          // console.log(self.state.columnSizeArr)
          self.eventBus.emit('resize')
          self.version = ZY.rid()
          cur = null
        }
      }

      let col = Arr(this.state.rowNum).map((v, i) => {

        function handleMouseDown(e) {
          // console.log(e)
          moving = true
          cur = {
            v,
            target: e.target,
            index: i
          }
          let container = self.getContainer()
          e.target.setAttribute('moving', 1)
          e.target.style.width = container.clientWidth + 'px'
          e.target.style.zIndex = 1111
          e.target.parentElement.style.userSelect = 'none'
          // let pos = self.$_GetPos(e.target)
          // console.log(container.clientHeight, pos)
        }



        return  ( <div class="z-table-grid-row">{i+1}
          <div
              onMousedown={handleMouseDown}
              row-resize-trigger>&nbsp;</div></div>)
      })
      return (
          <div class="z-table-grid-row-indicator" onMouseup={handleMouseUp} onMousemove={handleMouseMove}>
            {col}
          </div>
      )
    },
    renderColumnIndicator() {
      let self = this
      let moving = false
      let cur = null

      function handleMouseMove(e) {
        if (moving) {
          // console.log(e)
          let newVal = (e.pageX -  cur.target.parentElement.getBoundingClientRect().left)
          if (newVal < self.minResizeNum) {
            newVal = self.minResizeNum
          }
          cur.target.style.left = newVal + 'px'
          cur.newVal = newVal
        }
      }

      function handleMouseUp(e) {
        if (moving) {
          moving = false
          cur.target.style.height = '100%'
          cur.target.style.zIndex = null
          let newVal = cur.target.style.left
          cur.target.style.left = null
          cur.target.removeAttribute('moving')
          cur.target.parentElement.style.userSelect = null
          // console.log(cur)
          self.state.columnSizeArr[cur.index] = newVal
          // console.log(self.state.columnSizeArr)
          self.eventBus.emit('resize')
          self.version = ZY.rid()
          cur = null
        }
      }

      let col = Arr(this.state.columnNum).map((v, i) => {

        function handleMouseDown(e) {
          // console.log(e)
          moving = true
          cur = {
            v,
            target: e.target,
            index: i
          }
          let container = self.getContainer()
          e.target.setAttribute('moving', 1)
          e.target.style.height = container.clientHeight + 'px'
          e.target.style.zIndex = 1111
          e.target.parentElement.style.userSelect = 'none'
          // let pos = self.$_GetPos(e.target)
          // console.log(container.clientHeight, pos)
        }

        return  ( <div class="z-table-grid-column">{toLetters(i+1)} <div
            onMousedown={handleMouseDown}
            column-resize-trigger>&nbsp;</div></div>)
      })
      return (
          <div class="z-table-grid-column-indicator" onMouseup={handleMouseUp} onMousemove={handleMouseMove}>{col}</div>
      )
    },
    renderStyleItems() {
      let self = this
      let lastRowKey = this.state.rowNum
      let lastColumnKey = toLetters(this.state.columnNum)
      return self.state.styleDefs.map(v => {

        let styleMap = ZY.lodash.get(v, 'style')
        // console.log(styleMap)
        let styleObj = {
          ['grid-area']: v.id + "",
          ...styleMap
        }
        let rangeArr = v.range.split(':')
        // let lastColumnLetter = rangeArr[1].slice(0,1)
        // let lastColumnNum = convertLetterToNumber(lastColumnLetter)
        // let lastRowIndex = parseInt(rangeArr[1].slice(1))

        let [lastColumnNum, lastRowIndex, lastColumnLetter] = parseKeyArr(rangeArr[1])
        let islastrow = lastRowIndex >= lastRowKey
        let islastcolumn = lastColumnLetter === lastColumnKey

        // console.log(islastrow)
        return (<div data-grid-cell="1" style={styleObj}
                     data-key={rangeArr[0]}
                     data-last-key={rangeArr[1]}
                     data-row-num={lastRowIndex}
                     data-column-num={lastColumnNum}
                     class="z-data-grid__style-def"
                     islastcolumn={islastcolumn} islastrow={islastrow}></div>)
      })
    },
    renderItems() {
      let fieldMixinDefMap = getFieldMixinDefMap()
      let curFormCon = this.curFormCon

      let self = this
      let lastRowKey = this.state.rowNum
      let lastColumnKey = toLetters(this.state.columnNum)
      return self.state.defs.map((v, i) => {
        let {rowLineNum, columnNum} = getSimpleCell(i, this.state.rowNum, this.state.columnNum)
        let cellDataInfo = self.getCellDataInfo(columnNum, rowLineNum)
        // console.log(cellDataInfo, columnNum, rowLineNum)

        let styleDef = self.state.styleDefs.find(def => def.range === v.range)
        if (styleDef) {
          // console.log(styleDef)
        }
        let handleClick = self.handleCellClick()
        let handleMouseMove = self.handleCellMouseMove()
        let handleMouseUp = self.handleCellMouseUp()
        let styleObj = {
          ['grid-area']: v.id + ""
        }
        let subStyleObj = {}

        // 样式
        let fc = ZY.lodash.get(cellDataInfo, 'v.fc')
        if (fc) {
          styleObj['color'] = fc
        }
        let bg = ZY.lodash.get(cellDataInfo, 'v.bg')
        if (bg) {
          styleObj['backgroundColor'] = bg
        }
        let bl = ZY.lodash.get(cellDataInfo, 'v.bl', 0)
        if (bl) {
          styleObj['fontWeight'] = 'bold'
        }
        let it = ZY.lodash.get(cellDataInfo, 'v.it', 0)
        if (it) {
          styleObj['fontStyle'] = 'italic'
        }
        let cl = ZY.lodash.get(cellDataInfo, 'v.cl', 0)
        if (cl) {
          styleObj['textDecoration'] = 'line-through'
        }
        let ul = ZY.lodash.get(cellDataInfo, 'v.ul', 0)
        if (ul) {
          subStyleObj['textDecoration'] = 'underline'
        }

        let rangeArr = v.range.split(':')
        // let lastColumnLetter = rangeArr[1].slice(0,1)
        // let lastColumnNum = convertLetterToNumber(lastColumnLetter)
        // let lastRowIndex = parseInt(rangeArr[1].slice(1))

        let [lastColumnNum, lastRowIndex, lastColumnLetter] = parseKeyArr(rangeArr[1])
        let islastrow = lastRowIndex >= lastRowKey
        let islastcolumn = lastColumnLetter === lastColumnKey

        let classObj = {
          ["z-data-grid__item-def"]: 1
        }

        if (styleDef) {
          let border = ZY.lodash.get(styleDef, 'style.border')
          if (border) {
            classObj['has-style'] =1
          }
        }


        let cmFieldConfig = ZY.lodash.get(v, 'config')
        let widget = ZY.lodash.get(v, 'config.ui.widget');
        let ui = ZY.lodash.get(v, 'config.ui', {});
        let fieldName = ZY.lodash.get(v, 'config.fieldName', {});
        let pathArr = [fieldName]
        let _content = v.content ?? ''

        // let m = ZY.lodash.get(cellDataInfo, 'v.m', 0)
        // if (m) {
        //   _content = m
        // }
        // console.log(cellDataInfo)

        let iscustom = false
        let content
        if (widget && fieldMixinDefMap.has(widget)) {
          // let def = fieldMixinDefMap.get(widget).create(widgetConfig)
          // console.log(def)
          iscustom = true
          // console.log(v)
          let defVal = ui?.defVal
          content = (<cm-field noLabel={true} prop={fieldName}
                               pathArr={pathArr}
                               modelValue={defVal}
                               prop_config={cmFieldConfig}
                               onValchange={onValueChange}></cm-field>)
        } else {
          content = (<div style={subStyleObj}>{_content}</div>)
        }

        function onValueChange( e) {
          // console.log('onValueChange', curFormCon, e)
          curFormCon.updateValue('', [fieldName], e)
        }

        // console.log(islastrow)
        return (<div data-grid-cell="1" sel={v.id} style={styleObj} class={classObj}
                     onMousemove={handleMouseMove} onMouseup={handleMouseUp}
                     onMousedown={handleClick}
                     iscustom={iscustom}
                     data-key={rangeArr[0]}
                     data-last-key={rangeArr[1]}
                     data-row-num={lastRowIndex}
                     data-column-num={lastColumnNum}
                     islastcolumn={islastcolumn} islastrow={islastrow}>{content}</div>)
      })
    },
    getCellDataInfo(c, r) {
      return  this.state.celldata.find(v => {
        return v.r === r && v.c === c
      })
    },
    renderTable() {
      let self = this
      let col = Arr(this.state.rowNum * this.state.columnNum).map((v, i) => {
        let {isEven, rowLineNum, columnNum, letter, isLastRow, isLastColumn} = getCellInfo(i, this.state.rowNum, this.state.columnNum)
        // console.log(i, letter + rowLineNum)

        let styleObj = {}
        let cellDataInfo = self.getCellDataInfo(columnNum, rowLineNum)
        if (cellDataInfo) {
          // console.log(cellDataInfo)
          if (cellDataInfo?.v?.bg) {
            styleObj.backgroundColor = cellDataInfo?.v?.bg
          }
        }

        let handleClick = self.handleCellClick()
        let handleMouseMove = self.handleCellMouseMove()
        let handleMouseUp = self.handleCellMouseUp()
        let key = letter + rowLineNum

        return  ( <div data-grid-cell="1" class="z-table-grid-editor__cell" style={styleObj}
                       even={isEven}  row-line={rowLineNum} column-num={columnNum} isLastRow={isLastRow} isLastColumn={isLastColumn}
                       onMousemove={handleMouseMove} onMouseup={handleMouseUp}
                       onMousedown={handleClick}
                       data-key={key}
                       data-last-key={key}
                       data-row-num={rowLineNum}
                       data-column-num={columnNum}
        ><div cell-title>{letter}{rowLineNum}</div></div>)
      })
      return (
          <div class="z-table-grid-def z-table-grid-bg" >{col}</div>
      )
    },
    handleCellClick() {
      // alert(1)
      let self = this
      return function (e) {
        if (self.selectHandleCellClick) {
          self.selectHandleCellClick(e)
        }
      }
    },
    handleCellMouseMove() {
      // alert(1)
      let self = this
      return function (e) {
        if (self.selectHandleCellMouseMove) {
          self.selectHandleCellMouseMove(e)
        }
      }
    },
    handleCellMouseUp() {
      // alert(1)
      let self = this
      return function (e) {
        if (self.selectHandleCellMouseUp) {
          self.selectHandleCellMouseUp(e)
        }
      }
    },
    handleCellMouseDown() {
      // alert(1)
      let self = this
      return function (e) {
        if (self.selectHandleCellMouseDown) {
          self.selectHandleCellMouseDown(e)
        }
      }
    },
    handleMenu(type) {
      let self = this
      return function () {
        // console.log('sdsdsds')
        self.state.defs.push(  {
          id: 'label' + ZY.rid(6),
          range: self.selectState.areaRange.join(':')
        })
        self.$nextTick(() => {
          self.resolveState()
          self.updateStyle()
        })
      }
    }
  },
  render(h) {
    let $__renderRowIndicator = this.renderRowIndicator()
    let $__renderColumnIndicator = this.renderColumnIndicator()
    let $__renderTable = this.renderTable();
    let items = this.renderItems()
    let styleItems = this.renderStyleItems()
    // let handleMouseDown = this.handleCellMouseDown()

    let opt = {}
    if (this.renderSelectArea) {
      opt = this.renderSelectArea()
    }
// console.log('call render')

    let columnSizeArr = this.state.columnSizeArr
    let rowSizeArr = this.state.rowSizeArr

    let style = {
      "--z-grid-template-columns": columnSizeArr.join(" "),
      "--z-grid-template-rows": rowSizeArr.join(" "),
      "--z-grid-row-gap": "0",
      "--z-grid-column-gap": "0",
    }
    let classObj = 'z-table-grid-editor z-table-grid--edit ' + this.clsName

    let appendRow = this.appendRow
    let appendColumn = this.appendColumn
    let controlForm = this.controlForm

    function handleControlForm(type) {
      return function (newVal) {
        controlForm[type] = newVal
        // console.log(controlForm)
      }
    }

    // <v-contextmenu className={opt.selectCls} ref="contextmenu">
    //   <v-contextmenu-item onClick={this.handleMenu('juhe')}>聚合</v-contextmenu-item>
    //   <v-contextmenu-item>菜单2</v-contextmenu-item>
    //   <v-contextmenu-item>菜单3</v-contextmenu-item>
    // </v-contextmenu>
    //
    return (
        <div id={this.id} class="z-table-grid--render" ver={this.version}>

          <div class={classObj}
               style={style}
          >
            <div class="z-table-grid__action">
              <el-input-number max={100} value={controlForm.num} onInput={handleControlForm('num')}></el-input-number>
              <el-button onClick={appendRow}>appendRow</el-button>
              <el-button onClick={appendColumn}>appendColumn</el-button>
            </div>
            <div class="z-table-grid-editor-wrap">
              <div class="z-table-grid-editor-l">
                <div class="z-table-grid-plc"></div>
                {$__renderRowIndicator}
              </div>
              <div class="z-table-grid-editor-c">
                {$__renderColumnIndicator}
                <div class="z-table-grid z-table-grid-editor-content">
                  {$__renderTable}
                  <div class="z-table-grid-def z-table-grid-style">
                    {styleItems}
                  </div>
                  <div class="z-table-grid-def z-table-grid-con">
                    {items}
                  </div>
                  {opt.selectArea}
                </div>
              </div>
            </div>
          </div>
        </div>
    )
  }
}
</script>
